import React from "react";
import { findById, remove } from "../../services/student";
import { Table, Space,Button,Modal } from "antd";
import { ExclamationCircleFilled } from '@ant-design/icons';
const { Column } = Table;
const { confirm } = Modal;
function List(props) {
    const handleUpdate = async (id) => {
        let data = await findById(id);
        props.setStudent(data);
        props.setIsUpdateOpen(true);
    };
    const handleDel = async (id) => {
        confirm({
            title: '删除警告',
            icon: <ExclamationCircleFilled />,
            content: '是否删除当前学生？',
            async onOk() {
                await remove(id);
                props.show();
            }
          });
    };
    const handleChange = async (pagination) => {
        console.log(pagination);
        props.show({current:pagination.current,pageSize:pagination.pageSize});
    }
    return (
        <div>
            <Table dataSource={props.students} pagination={props.pagination} onChange={handleChange}>
                <Column title="姓名" dataIndex="name" key="name" />
                <Column title="年龄" dataIndex="age" key="age" />
                <Column title="性别" dataIndex="gender" key="gender" />
                <Column title="所属班级"  key="classes.name" render={(_,record) => (
                    record.classes ? record.classes.name : ""
                )} />
                <Column
                    title="操作"
                    key="action"
                    render={(_, record) => (
                        <Space size="middle">
                            <Button type="primary" onClick={e => handleUpdate(record._id)}>修改</Button>
                            <Button type="primary" danger onClick={e => handleDel(record._id)}>
                                删除
                            </Button>
                        </Space>
                    )}
                />
            </Table>
        </div>
    );
}

export default List;
